<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <title>Chess</title>
  <meta name="description" content="A Javascript chess game serving as a testbed for various AIs">

  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <link rel="stylesheet" href="css/style.css">
	
	<!-- Uncomment for Kalendae -->
	<!-- <link rel="stylesheet" href="css/kalendae.css"> -->
  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except this Modernizr build.
       Modernizr enables HTML5 elements & feature detects for optimal performance.
       Create your own custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  
	
	<header>
	</header>
	
	
	
  <div role="main" id="mainArea">
		<div id="board" class="fleft"></div>
		<div id="captured" class="fleft">
			<h1>Captured</h1>
			<div id="captureList">
			</div>
		</div>
		<div class="clearfix"></div>
		<div id="controls" class="fleft">
			
			<div class="fleft" id="gameSetup">
				<label for="player1">Player 1 (black)</label>
				<select id="player1">
					<option value="HumanAgent" selected="selected">Human</option>
					<option value="RandomAI">RandomAI</option>
					<option value="HighValueTargetAI">HighValueTargetAI</option>
				</select>
				
				<label for="player2">Player 2 (white)</label>
				<select id="player2">
					<option value="HumanAgent">Human</option>
					<option value="RandomAI">RandomAI</option>
					<option value="HighValueTargetAI" selected="selected">HighValueTargetAI</option>
				</select>
				
				<input type="submit" id="newGame" value="Start Game" />
				<p></p>
				<label for="keepPlaying"><input type="checkbox" id="keepPlaying" checked="checked" /> Keep Playing</label>&nbsp;&nbsp;<input type="submit" id="playPause" data-action="pause" value="Pause" class="fleft" />
			</div>
		</div>
		<br/>
		<!--<div id="log"></div>-->
  </div>
  <footer>

  </footer>


  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
	<!-- scripts concatenated and minified via build script -->
  <script src="js/plugins.js"></script>
	<script src="js/libs/Class.js"></script>
	<script src="js/libs/chess.js"></script>
	<script src="js/libs/chess.pieces.js"></script>
	<script src="js/libs/chess.display.js"></script>
	
	<script src="js/libs/agents/basic.agent.js"></script>
	<script src="js/libs/agents/human.agent.js"></script>
	<script src="js/libs/agents/random-ai.agent.js"></script>
	<script src="js/libs/agents/high-value-target.agent.js"></script>
	
	<script type="text/javascript">
		var game;
		var display;
		var p1;
		var p2;
		
		display = new Display('#board', '#captureList');
		display.displayBoard();
		
		var scenario = [
		  [null,null,null,null,null,null,null,'wk'],
			[null,null,null,null,null,null,null,null],
			[null,null,null,null,null,null,null,null],
			[null,null,null,'bk',null,null,null,null],
			[null,null,null,null,null,null,null,null],
			[null,null,null,null,null,null,null,null],
			[null,'bp',null,null,null,null,null,null],
			[null,null,null,null,null,null,null,null]
		];
		
		var nextGame = function(e) {
			var p1type = $('#player1').val();
			var p2type = $('#player2').val();
			p1 = new window[p1type]('black');
			p2 = new window[p2type]('white');
			
			
			
			
			game = new Chess(p1, p2, display);
			//game.createScenario(scenario);
			game.start(gameOver);
			
			if (e) { e.preventDefault(); }
		};
		
		$('#newGame').click(nextGame);
		
		$('#playPause').click(function(e) {
			var $but = $(this);
			var act = $but.data('action');
			if (act == 'play') {
				$but.data('action', 'pause').attr('value', 'Pause');
				game.playGame();
			} else {
				$but.data('action', 'play').attr('value', 'Play');
				game.pauseGame();
			}
			e.preventDefault();
		});
		
		
		var wins = {
			'black': 0,
			'white': 0,
			'draw': 0
		};
		
		var gameOver = function(game, winner) {
			wins[winner]++;
			
			var msg = '';
			if (winner == 'draw') {
				msg = 'Draw';	
			} else {
				msg = 'Player ' + (winner == 'white' ? '2, ' + p2.agentName : '1, ' + p1.agentName) + ' (' + winner + ') wins';
			}
			
			if (console) { console.log(msg); }
			
			
			if ($('#keepPlaying').is(':checked')) {
				nextGame();
			}
			
			//console.log('Black: ' + wins.black + ' (' + Math.floor((wins.black / (wins.black + wins.white)) * 100) + '%), White: ' + wins.white + ' (' + Math.floor((wins.white / (wins.black + wins.white)) * 100) + '%)');
			//runGame();
		};
		
	</script>
	
	<!-- Uncomment for jQuery UI -->
  <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>-->
  
	<!-- Uncomment for Kalendae -->
	<!--<script src="js/libs/kalendae.min.js" type="text/javascript" charset="utf-8"></script>-->
	
	<!-- Uncomment for dateFormat -->
	<!--<script src="js/libs/dateFormat.js" type="text/javascript"></script>-->
	
  <!-- end scripts -->

  <!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
       mathiasbynens.be/notes/async-analytics-snippet -->
  <script>
    var _gaq=[['_setAccount','UA-15804777-1'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
  </script>
</body>
</html>